<template>
    <div class="LeftMenu">
        <ul class="left-ment-list" v-if="leftMenuFlag">
            <li
                v-for="(item, index) in msg_list"
                :key="item.type"
                :class="activeClass == index ? 'active' : ''"
                @click="checkContent(index, item.path)"
            >
                <!-- <span class="solid" v-if="activeClass == index"></span> -->
                <i class="iconfont">{{ item.icon }}</i>
                <span
                    style="margin-left: 2px; min-width: 56px; text-align: left"
                    >{{ item.title }}</span
                >
            </li>
        </ul>
        <ul class="left-ment-list-samll" v-if="!leftMenuFlag">
            <li
                v-for="(item, index) in msg_list"
                :key="item.type"
                :class="activeClass == index ? 'active' : ''"
                @click="checkContent(index, item.path)"
            >
                <!-- <span class="solid" v-if="activeClass == index"></span> -->
                <i class="iconfont">{{ item.icon }}</i>
            </li>
        </ul>
        <div class="left-menu-footer">
            <p v-if="leftMenuFlag" style="padding-bottom: 14px">
                <a
                    href="https://demoapi.richtechcn.com/Cause//New A-MIS操作説明書.pdf"
                    target="_blank"
                    style="color: rgba(0, 0, 0, 0.85)"
                    >Help</a
                >
            </p>
            <p v-if="leftMenuFlag" style="padding-bottom: 14px">
                <a
                    :href="path"
                    target="_blank"
                    style="color: rgba(0, 0, 0, 0.85)"
                    >Version:{{ VersionNo }}</a
                >
            </p>
            <i
                class="el-icon-s-fold"
                @click="toggerMenu"
                v-if="leftMenuFlag"
            ></i>
            <i
                class="el-icon-s-unfold"
                @click="toggerMenu"
                v-if="!leftMenuFlag"
            ></i>
        </div>
    </div>
</template>

<script>
import { getLocalStorage, setLocalStorage } from "@/utils/storage";
import $ from "jquery";
import { getVersionNo } from "@/api/api";
// 导出模块
export default {
    // 模块名字
    name: "LeftMenu",
    // 模块数据
    data() {
        //数据
        return {
            msg_list: [
                {
                    type: "2",
                    title: this.$t("message.smartPidPage.leftMenu.menuOne"),
                    path: "/pidSvgTabView",
                    userType: "1",
                    icon: "\ue82e",
                },
                {
                    type: "6",
                    title: this.$t("message.smartPidPage.leftMenu.menuTwo"),
                    path: "/pidDocumentView",
                    userType: "1",
                    icon: "\ue91e",
                }
            ],
            activeClass: 0,
            leftMenuFlag: true,
            path: "",
            VersionNo: "",
        };
    },
    // 注册组件
    components: {},
    // 监听指定值，只有指定值变化，才会触发
    watch: {},
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        checkContent(index, path) {
            this.activeClass = index;
            setLocalStorage("activeClass", index);
            if (path) {
                this.$router.push(path);
            }
        },
        toggerMenu() {
            this.leftMenuFlag = !this.leftMenuFlag;
            if (this.leftMenuFlag) {
                $(".LeftMenu").width("192");
                $(".View").width($(".Content").width() - 192);
            } else {
                $(".LeftMenu").width("64");
                $(".View").width($(".Content").width() - 64);
            }
        },
        getVersionNoApi() {
            getVersionNo().then((res) => {
                console.log(res, "getVersionNo");
                this.path = res.data.data.value;
                this.VersionNo = res.data.data.key;
            });
        },
    },
    // 创建前状态(里面是操作)
    beforeCreate() {},
    // 创建完毕状态(里面是操作)
    created() {
        this.getVersionNoApi();
    },
    // 挂载前状态(里面是操作)
    beforeMount() {},
    // 挂载结束状态(里面是操作)
    mounted() {
        if (getLocalStorage("accType") == "2") {
            this.msg_list.splice(7, 1);
            this.msg_list.splice(4, 1);
        }
        let _this = this;
        $(window).resize(function () {
            if (_this.leftMenuFlag) {
                $(".LeftMenu").width("192");
                $(".View").width($(".Content").width() - 192);
            } else {
                $(".LeftMenu").width("64");
                $(".View").width($(".Content").width() - 64);
            }
        });
    },
    // 更新前状态(里面是操作)
    beforeUpdate() {},
    // 更新完成状态(里面是操作)
    updated() {},
    // 销毁前状态(里面是操作)
    beforeDestroy() {},
    // 销毁完成状态(里面是操作)
    destroyed() {},
};
</script>
<style  lang="scss" scoped>
.LeftMenu {
    width: 192px;
    height: 100%;
    background: #f8f8f8;
    position: relative;
    // border-right: 1px solid #b4b4b4;
    .left-ment-list {
        margin-top: 16px;
        li {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 14px;
            width: 136px;
            height: 40px;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            color: rgba(0, 0, 0, 0.85);
            background: #f8f8f8;
            border-radius: 4px;
            margin: 0 auto;
            margin-bottom: 16px;
            cursor: pointer;
            border: 1px solid #dcdcdc;
            .solid {
                width: 2px;
                height: 20px;
                background: rgba(255, 255, 255, 1);
            }
            .iconfont {
                font-size: 20px;
            }
        }
        .active {
            background: rgba(188, 0, 15, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
        }
    }
    .left-ment-list-samll {
        width: 64px;
        margin-top: 16px;
        li {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 40px;
            color: rgba(0, 0, 0, 0.85);
            font-size: 24px;
            cursor: pointer;
        }
        .active {
            background: rgba(188, 0, 15, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
        }
    }
    .left-menu-footer {
        width: 100%;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        bottom: 26px;
        p {
            cursor: pointer;
        }
        .el-icon-s-fold,
        .el-icon-s-unfold {
            cursor: pointer;
            font-size: 24px;
        }
    }
}
</style>
